$(function() {
	// 内部插入
	// $(".box ul").append("<li class='red'>Bootstrap</li>")
	// $("<li class='red'>Bootstrap</li>").appendTo(".box ul")
	// $(".box ul").prepend("<li class='red'>Bootstrap</li>")
	// $("<li class='red'>Bootstrap</li>").prependTo(".box ul")
	
	// 外部插入
	// $(".box ul").before("<li class='red'>Bootstrap</li>")
	// $("<li class='red'>Bootstrap</li>").insertBefore(".box ul")
	// $(".box ul").after("<li class='red'>Bootstrap</li>")
	// $("<li class='red'>Bootstrap</li>").insertAfter(".box ul")
	
	// 包裹
	// $(".box ul").wrap("<div></div>") // 外层包裹<div></div>
	// $(".box ul li").wrap("<div></div>") // 每一个外层包裹<div></div>
	// $(".box ul").unwrap() // 取消外部包裹，.wrap() 的逆操作
	// $(".box ul").wrapAll("<div></div>")
	// $(".box ul li").wrapAll("<div></div>") // 集合的外层包裹<div></div>
	// $(".box ul li").wrapInner("<div></div>") // 匹配元素的内部包裹<div></div>
	// $(".box ul").wrapInner("<div></div>") // 匹配元素的内部包裹<div></div>
	
	// 替换
	// $(".box ul li").replaceWith("<div class='red'>div</div>")
	// $("<div class='red'>div</div>").replaceAll(".box ul li")
	
	// 
	// $(".box ul").remove()
	// $(".box ul").empty()
	// $(".box ul").html("")
	
	$(".box ul li").click(function() {
		$(this).toggleClass("red")
	})
	
	$(".copy").click(function() {
		// $(".box").append($(".box ul").clone())
		$(".box").append($(".box ul").clone(true))
	})
	
	
	
	
	
	/*
	const div = document.createElement("div")
	ele.append(div)
	ele.prepend(div)
	ele.before(div)
	ele.after(div)
	ele.remove()
	ele.cloneNode()
	
	ele.appendChild()
	ele.removeChild()
	*/
})


